﻿@model AncientLand.Service.Entity.Photos
@{
    ViewBag.Title = "作品上传";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Uploadify/swfobject.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Uploadify/jquery.uploadify.v2.1.0.min.js")"></script>
<link href="@Url.Content("~/Scripts/Uploadify/uploadify.css")" rel="stylesheet" type="text/css" />
<div class="page-contents clearfix">
    <div class="page-contents-wrap float-left">
        <div class="page-container">
            <div id="post-146" class="post-146 page type-page status-publish hentry">
                <h1 class="entry-title">
                    Upload photos</h1>
                <div class="clear">
                </div>
                <div id="commentform" style="width: 100%">
                    <div id="respond">
                        <h3 id="reply-title">
                            上传作品图片
                        </h3>
                        @using (Html.BeginForm())
                        {
                            @Html.ValidationSummary(true)
                            <p class="comment-form-author">
                                <label>
                                    作品类型：</label>
                            </p>
                            <p>
                                <input type="radio" value="1" checked="checked" id="WeddingPhoto" name="PhotoType" style="width: 18px" /><label>婚纱</label>
                                <input type="radio" value="2" name="PhotoType" id="PictorialPhoto" style="width: 18px" /><label>写真</label>
                            </p>
                            <p class="comment-form-author">
                                <input type="checkbox" value="1" name="IsDisplayOnHomePage" id="IsDisplayOnHomePage" style="width: 18px" /><label>是否在首页显示</label>
                            </p>
                            <p class="comment-form-author">
                                @Html.LabelFor(model => model.Title)<span class="required">：*&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                @Html.ValidationMessageFor(model => model.Title)
                            </p>
                            <p>
                                @Html.EditorFor(model => model.Title)
                            </p>
                            <p class="comment-form-email">
                                @Html.LabelFor(model => model.Content)<span class="required">：*&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                @Html.ValidationMessageFor(model => model.Content)
                            </p>
                            <p>
                                @Html.TextAreaFor(model => model.Content, new { rows = "5", id = "news-content" })
                            </p>
                            <p  class="comment-form-email">
                                <label for="photos">选择要上传的图片【图片大小：宽960px*高530px】：</label>
                            </p>
                            <div class="comment-form-email">
                                <p>
                                    <input id="fileInput1" name="fileInput1" type="file" /></p>
                                <p style="margin-top: 5px; font-size: 14px; font-weight: bold;">
                                    <a href="javascript:if(checkImport()){$('#fileInput1').uploadifyUpload();}">上传图片</a></p>
                                <p style="margin-top: 5px; font-size: 14px; font-weight: bold;">
                                    <span id="result"></span>
                                </p>
                            </div>
                            @Html.HiddenFor(model => model.ImgPath)
                            @Html.HiddenFor(model => model.ThumbnailPath)
                            <p class="form-submit">
                                <input type="submit" value="【保 存】" id="submit" name="submit" />
                            </p>
                        }
                    </div>
                    <!-- #respond -->
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var uploadFolder = "/UpFiles/Photos/";
    $(function () {

        $('#submit').click(function () {
            var imgPath = $("#ImgPath").val();
            var thumbnailPath = $("#ThumbnailPath").val();
            if (imgPath == "" || thumbnailPath == "") {
                alert("须先上传作品图片");
                return false;
            }

        })
        //上传
        $('#fileInput1').uploadify({
            'uploader': '@Url.Content("~/Scripts/Uploadify/uploadify.swf")',
            'script': '@Url.Content("~/ShowCase/Upload")',
            'folder': uploadFolder,
            'cancelImg': '@Url.Content("~/Scripts/Uploadify/cancel.png")',
            'fileExt': '*.jpg;*.gif',
            'fileDesc': 'Image Files (.JPG, .GIF)',
            'sizeLimit': 1024 * 1024 * 4, //4M
            'multi': false,
            'onComplete': fun
        });

    });
    function fun(event, queueID, fileObj, response, data) {
        if (response != "") {
            $("#ImgPath").val(uploadFolder + response);
            $("#ThumbnailPath").val(uploadFolder+"Thumbnail/" + response)
            showInfo("成功上传" + response, true); //showInfo方法设置上传结果     
        }
        else {
            showInfo("文件上传出错！", false);
        }
    }
    //显示提示信息，textstyle2为绿色，即正确信息；textstyl1为红色，即错误信息
    function showInfo(msg, type) {
        var msgClass = type == true ? "textstyle2" : "textstyle1";
        $("#result").removeClass();
        $("#result").addClass(msgClass);
        $("#result").html(msg);
    }
    //如果点击‘导入文件’时选择文件为空，则提示
    function checkImport() {
        if ($.trim($('#fileInput1Queue').html()) == "") {
            alert('请先选择要导入的文件！');
            return false;
        }
        return true;
    } 

    </script>
